<template>
  <div>
    <el-row type="flex">
      <el-col :span="3"></el-col>
      <el-col :span="18">
        <div class="headerTop">
          <el-input v-model="searchValue" clearable class="headerInput" v-focus></el-input>
          <!-- 自定义指令 -->
          <!-- <span    v-wangkaidi>王凯迪喜欢？？？颜色</span> -->
          <el-button @click="add()">新增</el-button>
        </div>
        <div>
          <el-table :data="computedData" style="width: 100%">
            <el-table-column
              v-for="(item,index) in headerData"
              :key="index"
              :prop="item.prop" 
              :label="item.label"
              :width="item.width"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope ,1)">编辑</el-button>
                <el-button type="text" size="small" @click="deleterow(scope)">删除</el-button>
                <el-button type="text" size="small" @click="edit(scope,2)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="3"></el-col>
    </el-row>
    <el-dialog
      :title="eldialog"
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      width="700px"
      v-DragWindow
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" clearable :disabled="dialognum== 2"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" clearable :disabled="dialognum== 2"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" clearable :disabled="dialognum== 2">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市" prop="town">
          <el-select
          :disabled="dialognum== 2"
            class="citySelect"
            v-model="ruleForm.province"
            clearable
            @change="changeprovince()"
          >
            <el-option v-for="item in city" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
          <el-select
            v-model="ruleForm.city"
            :disabled="cityList.length == 0 || dialognum== 2"
            @change="changecity()"
            clearable
            class="citySelect"
          >
            <el-option
              v-for="item in cityList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
          <el-select
            class="citySelect"
            v-model="ruleForm.town"
           
            clearable
            :disabled="townList.length == 0 || dialognum== 2"
          >
            <el-option
              v-for="item in townList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="爱好" prop="like">
          <el-checkbox-group v-model="ruleForm.like" :disabled="dialognum== 2">
            <el-checkbox label="1">篮球</el-checkbox>
            <el-checkbox label="2">喝酒</el-checkbox>
            <el-checkbox label="3">烫头</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" v-if="eldialog=='新增' && dialognum!= 2">创建用户</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" v-if="eldialog=='编辑' && dialognum!= 2">编辑用户</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div>{{a.b}}</div>
    <el-button @click="addadd()">点击</el-button>
  </div>
</template>
<script>
// @/ 指的是src的目录
import city from "@/city.json";
export default {
  name: "App",
  data() {
    return {
      a:{},
      eldialog: "",
      // province:"",
      //     city:"",
      //     town:"",
      //     name:"",
      //     email:"",
      //     sex:"",
      //     like:[]
      rules: {
        name: [{ required: true, message: "请输入名字", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        sex: [{ required: true, message: "请输入性别", trigger: "change" }],
        town: [{ required: true, message: "请输入完整", trigger: "blur" }],
        like: [{ required: true, message: "请输入爱好", trigger: "change" }]
      },
      dialogVisible: false,
      searchValue: "",
      headerData: [
        {
          prop: "name",
          label: "用户名",
          width: "100"
        },
        {
          prop: "email",
          label: "邮箱",
          width: "100"
        },
        {
          prop: "sex",
          label: "性别",
          width: "100"
        },
        {
          prop: "city",
          label: "城市",
          width: "100"
        },
        {
          prop: "like",
          label: "爱好"
        }
      ],
      tableData: [
        {
          name: "王凯迪",
          email: "123@163.com",
          sex: "男",
          city: "江苏省-南京市-江宁区",
          like: ["篮球"]
        },
        {
          name: "王新华",
          email: "123@163.com",
          sex: "男",
          city: "江苏省-南京市-江宁区",
          like: ["篮球"]
        },
        {
          name: "王志超",
          email: "123@163.com",
          sex: "男",
          city: "江苏省-南京市-江宁区",
          like: ["篮球"]
        },
        {
          name: "颜朋朋",
          email: "123@163.com",
          sex: "男",
          city: "江苏省-南京市-江宁区",
          like: ["篮球"]
        },
        
      ],
      $index:"",
      city: city, //省级数据
      cityList: [], //市级数据
      townList: [],
      ruleForm: {
        province: "",
        city: "",
        town: "",
        name: "",
        email: "",
        sex: "",
        like: [],
       
      },
      dialognum:""
    };
  },
  methods: {
    deleterow(scope){
      let _self = this;
      _self.tableData.splice(scope.$index,1 )
    },
    addadd(){
      let _self = this;
      // _self.a.b = 1;
      // _self.$set(当前的对象 ， 新加的key ,新加的对应value)
      _self.$set(_self.a, "b" , 1)
      console.log(_self.a)
    },
    handleClose() {
      let _self = this;
      _self
        .$confirm("此操作将关闭弹窗, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _self.dialogVisible = false;
        })
        .catch(() => {
          _self.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
  
    submitForm(formName) {
      let _self = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(_self.ruleForm);

          let data = JSON.parse(JSON.stringify(_self.ruleForm));
          if (data.sex == "1") {
            data.sex = "男";
          } else {
            data.sex = "女";
          }
          for (let item of _self.city) {
            if (_self.ruleForm.province == item.code) {
              data.province = item.name;
            }
          }
          for (let item1 of _self.cityList) {
            if (_self.ruleForm.city == item1.code) {
              data.city = item1.name;
            }
          }
          for (let item3 of _self.townList) {
            if (_self.ruleForm.town == item3.code) {
              data.town = item3.name;
            }
          }
          data.con = `${data.province}-${data.city}-${data.town}`;
          data.likecon = [];
          for (let item4 of data.like) {
            if (item4 == "1") {
              data.likecon.push("篮球");
            } else if (item4 == "2") {
              data.likecon.push("喝酒");
            } else {
              data.likecon.push("烫头");
            }
          }
          if(_self.eldialog=='新增'){
             _self.tableData.push({
            name: data.name,
            email: data.email,
            sex: data.sex,
            city: data.con,
            like: data.likecon
          });
          }else{
          //  数组 $set(数组本身 , 需要改的下标 ，替换的对象) 
          _self.$set(_self.tableData, _self.$index , {
                    name: data.name,
                    email: data.email,
                    sex: data.sex,
                    city: data.con,
                    like: data.likecon
          })
            // _self.tableData[ _self.$index ] = {
            //         name: data.name,
            //         email: data.email,
            //         sex: data.sex,
            //         city: data.con,
            //         like: data.likecon
            //       }
              
          }
         
          _self.dialogVisible = false;
          console.log(data);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    add() {
      let _self = this;
      _self.eldialog = "新增";
      _self.dialognum =3;
      _self.dialogVisible = true;
    },
    edit(scope,num) {
      let _self = this;
      if(num == "1"){
        _self.eldialog = "编辑";
      }else{
       _self.eldialog = "查看"
      }
     _self.dialognum = num;
      _self.$index = scope.$index;
      console.log(_self.tableData[scope.$index]);
      let { city , email ,like , name , sex} =  _self.tableData[scope.$index];
      _self.dialogVisible = true;
      _self.ruleForm={
           name,
          email,
          sex:sex=="男"?"1":"2",
          like:[]
      }
      // _self.ruleForm.like
      for(let item of  like){
        if(item == "篮球"){
          _self.ruleForm.like.push("1")
        }else if(item == "喝酒"){
          _self.ruleForm.like.push("2")
        }else{
          _self.ruleForm.like.push("3")
        }
      }
   
      let list = city.split("-");
      for(let item of _self.city){
        if(item.name == list[0]){
          _self.ruleForm.province = item.code;
          _self.cityList= item.children;
          for(let item1 of item.children){
            if(item1.name == list[1]){
              _self.townList = item1.children;
              _self.ruleForm.city = item1.code;

              for(let item2 of item1.children){
               if(item2.name == list[2]){
                   _self.ruleForm.town = item2.code
               }
              }
            }
          }
        }
      }
      

    },
    // look() {
    //   let _self = this;
    //   _self.eldialog = "查看";
    //   _self.dialogVisible = true;
    // },
    // 市
    changecity() {
      let _self = this;
      _self.townList = [];
      _self.ruleForm.town = "";
      for (let item of _self.cityList) {
        if (item.code == _self.ruleForm.city) {
          _self.townList = item.children;
        }
      }
    },
    // 省
    changeprovince() {
      let _self = this;
      _self.townList = [];
      _self.cityList = [];
      _self.ruleForm.city = "";
      _self.ruleForm.town = "";
      console.log(_self.ruleForm.province);
      for (let item of _self.city) {
        if (item.code == _self.ruleForm.province) {
          _self.cityList = item.children;
        }
      }
    }
  },
  filter:{},//过滤
  watch:{},//监听
  computed:{
    // 计算属性 
    // 将data里面某一个数据进行计算 并返回计算过后结果 结果直接输出给另一个数据（a） 
    // 但是(a)另一个数据不能定义在data里面
    // 应用场景 在数据和对象时如果需要简单的一个筛选和改变及计算时我们可以直接计算属性
    // a数据名（）{进行简单处理或者改变   最后return出结果}
    computedData(){
      let _self = this;
     return _self.tableData.filter(function(item){
        return item.name.indexOf(_self.searchValue) !==-1
      })
    }
  }
};
</script>
<style>
.headerInput {
  width: 200px;
}
.citySelect {
  width: 150px;
}
</style>